<template>
  <div class="module_content" >
    <router-link :to="{name: 'productDetail', params: {commodityID: child.id}, query: {keyword: $route.query.keyword}}" class="content_box brick-item"
      v-for=" (child, index) in product" :key="index"
    >
      <span class="discount-card">{{fielsStatus === 1 ? `${actTime}前享受${(discount * 10).toFixed(2)}折` : `${actDate}享受${(discount * 10).toFixed(2)}折`}}</span>
      <div class="preview-img">
        <img class="img" :src="prefixImg + child.image " :alt="child.name" :title="child.name" @error="catchErrorImage($event)"/>
      </div>
      <h3 class="title"><span v-html="child.name"></span><template v-if="child.other"> - <span v-html="child.other"></span></template></h3>
      <span class="format" v-html="child.brandName"></span>
      <h4 class="price">
        <template v-if="isExamComputed === 1">
          <!-- <template v-if="fielsStatus !== 1">
            <p class=" color-red">￥??.?? - ￥??.??</p>
            <p class="old_price">￥{{child.priceLowerLimit | floatPrices}} <span v-if="child.priceLowerLimit !== child.priceUpperLimit">- ￥{{child.priceUpperLimit  | floatPrices}}</span></p>
          </template> -->
          <template>
            <p class="color-red">￥{{child.priceLowerLimit * discount | floatPrices}} <span v-if="child.priceLowerLimit !== child.priceUpperLimit">- ￥{{child.priceUpperLimit * discount  | floatPrices}}</span></p>
            <p class="old_price">￥{{child.priceLowerLimit | floatPrices}} <span v-if="child.priceLowerLimit !== child.priceUpperLimit">- ￥{{child.priceUpperLimit  | floatPrices}}</span></p>
          </template>
        </template>
        <span class="txt-lf ft-14" v-else-if="isExamComputed === 4">登录后查看价格</span>
        <span class="txt-lf ft-14" v-else>审核通过可查看</span>
      </h4>
      <button class="brand-btn">
        {{fielsStatus === 1 ? `立即抢购` : `${actDate}启动 敬请期待`}}
      </button>
    </router-link>
  </div>
</template>
<script>
  import {Row, Button} from 'element-ui'
  import {labels, prefixImg} from '@/tool/index'
  import {mapState} from 'vuex'
  import _ from 'lodash'
  export default{
    name: 'brandProductItem',
    components: {
      elRow: Row,
      elButton: Button
    },
    props: {
      product: [Object, Array],
      fielsStatus: {
        type: Number
      },
      actDate: {
        type: String
      },
      actTime: {
        type: String
      },
      discount: {
        type: Number
      }
    },
    mounted () {
      this.debounceActive()
    },
    data () {
      return {
        activetab: -1
      }
    },
    methods: {
      catchErrorImage (e) {
        e.target.src = require('img/newload.png')
      },
      labels (newVal) {
        let _labelarr = []
        if (newVal === null) return false
        let _arr = newVal.split(',')
        _arr.map((item, index) => {
          _labelarr.push({text: labels[item - 1], xh: item})
        })
        return _labelarr
      },
      debounceActive () {
        this.goToActive = _.debounce(function (item) {
          if (this.fielsStatus !== 1) {
            this.$message(`${this.actDate}`)
            return
          }
          this.$router.push({name: 'productDetail', params: {commodityID: item.id}, query: {keyword: this.$route.query.keyword}})
        }, 1000, {leading: true, trailing: false})
      }
    },
    computed: {
      prefixImg () {
        return prefixImg
      },
      isExamComputed () {
        return this.$store.getters.loginStatus
      },
      ...mapState({
        nowDiscount: state => state.user.discount
      })
    }
  }
</script>
<style lang="scss" scoped>
  .button_style{width:74%;}
  .content_box{
    padding-bottom: 20px;
    .price{
      margin-bottom: 10px;
    }
  }
  .preview-img{
    height: 200px;
    width: 200px;
    margin: 0 auto 12px;
    .img{
      width: 100%;
      height: 100%;
      vertical-align: middle
    }
  }
  .product_img{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    transform: scale(0.75);
    transform-origin: 50% 50%;
  }
  .pro_text{
    position: absolute;
    bottom: 0;
    width: 100%;
  }    
  .btn-buy{
    border:1px solid #FF0000;
    color: #FF0000;
    padding: 4px 14px;
    font-size: 14px;
    margin: 0 24px 20px;
    border-radius: 2px;
  }
  .dicount-price{
    font-size: 16px;
    margin-top: 16px;
    p{
      line-height: 20px;
    }
  }
  .old_price{
    color: #bdbdbd;
    font-size: 12px;
    text-decoration: line-through;
  }
  .origin_price{
    color: #FF0000;
    font-size: 16px;
    text-decoration: none;
  }
  .page_box {
    text-align: center;
    margin-top:0;
    margin-bottom: 20px;
  }
  .brand-btn{
    padding: 3px 0;
    border: 1px solid #FF0000;
    color: #FF0000;
    line-height: 21px;
    border-radius:2px;
    background: #fff;
    width: 184px;
    cursor: pointer;
  }
</style>

